<template lang="html">
  <div id="change">
    <div class="header lHeader">
      <span class="line"></span>
      <div class="text">
        持仓变动
        <img src="~@/assets/images/questionMark.png" v-on:click = 'posChange()'>
      </div>
      <span class="line"></span>
    </div>
    <div class="content" v-for = 'item in data'>
      <div class="title clearfix">
        <span class="fl left" v-text = 'item.type'></span>
        <span class="fr right">更多</span>
      </div>
      <div class="caption">
        <span>股票名称</span>
        <span>价格</span>
        <span>数量</span>
        <span>金额</span>
      </div>
      <ul>
        <li class="captionText" v-for = 'item in item.stockData'>
          <div class="stockName">
            <span class="point" v-if = 'Boolean(item[5]) == true'></span>
            <span class="name" v-text = 'item[0]'></span>
            <span class="stock" v-text = 'item[1]'></span>
          </div>
          <div class="price" v-text = 'item[2]'></div>
          <div class="number" v-text = 'item[3]'></div>
          <div class="money" v-text = 'item[4]'></div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import RemoteDAO from '@/common/remoteDAO'
export default {
  data() {
    return {
      data: [{
        type: '今日申购',
        stockData: [
          ['国泰君安', 'HK60012', 123, 8000, 2000, 1],
          ['招商银行', 'HK92182', 234, 90125, 5245, 1],
          ['国泰君安', 'HK60012', 123, 8000, 2000, 1]
        ]
      }, {
        type: '今日买入',
        stockData: [
          ['国泰君安', 'HK60012', 123, 8000, 2000, 0],
          ['招商银行', 'HK92182', 234, 90125, 5245, 0],
          ['国泰君安', 'HK60012', 123, 8000, 2000, 0],
          ['招商银行', 'HK92182', 234, 90125, 5245, 0]
        ]
      }, {
        type: '今日卖出',
        stockData: [
          ['国泰君安', 'HK60012', 123, 8000, 2000, 0],
          ['招商银行', 'HK92182', 234, 90125, 5245, 0],
          ['国泰君安', 'HK60012', 123, 8000, 2000, 0],
          ['招商银行', 'HK92182', 234, 90125, 5245, 0]
        ]
      }]
    }
  },
  methods: {
    posChange() {
      this.$emit('clickPosChange', 1)
    }
  }
}
</script>

<style lang="css" scoped>
#change{
  background-color: #fff;
}
.header{
  padding-top: 40px;
  margin-top: 14px;
}
.header .text img {
  display: inline-block;
  height: 26px;
  width: 26px;
  margin-left: 6px;
  vertical-align: bottom;
}

.header .text {
  margin-left: 64px;
  margin-right: 64px;
}
.content{
  margin-top: 50px;
}
.title {
  width: 100%;
  height: 35px;
  line-height: 35px;
}
.left{
  font-size:28px;
  margin-left: 30px;
  color: #555;
}
.right{
  font-size: 24px;
  margin-right: 30px;
  color:#309fea;
}
.caption{
  margin-top: 25px;
  padding-left: 30px;
  font-size: 24px;
  color: #9a9999;
  border-bottom: 1px solid #ddd;
}
.caption span {
  display: inline-block;
  width: 24%;
  text-align: center;
  margin-bottom: 20px;
}
.captionText{
  display: block;
  padding-left: 30px;
  height: 104px;
  color:#555;
  border-bottom: 1px solid #ddd;
}
.captionText div{
  display: inline-block;
  width: 24%;
  box-sizing: border-box;
  text-align: center;
  font-size: 30px;
  margin: 18px 0 20px 0;
}
.stockName{
  vertical-align: middle;
  color:#222;
}
.stockName .point{
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: orange;
  border-radius: 50%;
  margin:0 0 5px -30px;
}
.stockName .name{
  margin-left: 10px;
}
.stockName .stock{
  font-size: 24px;
  color:#555;
}
.price{
  color:#eb333b;
}
</style>
